.voice-bigbox{
  padding:15px 0.2rem 5px;
  background: #fff;
}
.voice-wrap{
  border:1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  .textbox{
    position: relative;
    padding:0 80px 0 0;
    .weui-cell{
      padding:9px 0 9px 10px;
    }
  }
}
.voice-imgbox{
  padding: 0.1rem 0 0 10px;
  li{
    width:2.1rem;
    height: 1.45rem;
    float: left;
    margin:0 20px 20px 0;
    position: relative;
    /*.img-box{
      height: 100%;
    }*/
    img{
      display: block;
      width:100%;
      height: 100%;
      background: #ccc;
    }
    .icon-del-black{
      position: absolute;
      top: -14px;
      right: -14px;
      color: #ff7202;
      font-size: 20px;
      width:30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      background: transparent;
    }
  }
}
.voice-btn{
  position: absolute;
  top:10px;
  right: 0;
  .iconfont{
    padding:0 10px;
    font-size: 17px;
  }
  .line{
    color:#ddd;
    margin-top:-2px;
  }
}
.voice-mp3{
  float: left;
  line-height: 28px;
  margin:0 10px 10px 0;
  .vm-del{
    padding:0 0.2rem 0 5px;
    color: #77babd;
  }
}
.vm-ctx{
  border-radius: 4px;
  /*background: #dddddd;*/
  background: url(~images/icon/stop.png) no-repeat 10px center;
  background-size: auto 70%;
  border:1px solid #ddd;
  color: #959595;
  margin:0 30px 0 0;
  /*padding:0 10px;*/
  cursor: pointer;
  position: relative;
  /*.iconfont{
    padding:0 0.2rem 0 0;
    font-size: 18px;
  }*/
  .txt{
    /*padding-left: 20px;*/
    padding:0 10px 0 30px;
    display: block;
  }
  .second{
    position: absolute;
    left: 105px;
    top:0;
  }
  &.cur{
    background: url(~images/icon/play.gif) no-repeat 10px center #dddddd;
    background-size: auto 70%;
    .txt{
      color:#ddd;
    }
  }
}
.voice-dialog{
  text-align: center;
  font-size: 17px;
  .tit{
    line-height: 24px;
    padding:5px 0 0;
  }
  .tit1{
    line-height:21px;
    font-size:14px;
    padding:0 0 5px;
    color:#666;
  }
  .iconfont{
    font-size: 48px;
    color: #959595;
    line-height: 1;
  }
  .voice-loading{
    height: 45px;
  }
  .voice-dialog-btn{
    height: 52px;
    line-height: 52px;
    border-top:1px solid #ddd;
    li{
      border-right: 1px solid #ddd;
      box-sizing:border-box;
      float: left;
      width:50%;
      &:last-of-type{
        border-right:0 none;
        color: #77babd;
      }
    }
  }
}
.voice-loading{
  span{
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 2px;
    background: #cccccc;
    -webkit-animation: load 1.95s ease infinite;
    &:last-child{
      margin-right: 0px; 
    }
    &:nth-child(1){
      -webkit-animation-delay:0.13s;
    }
    &:nth-child(2){
      -webkit-animation-delay:0.26s;
    }
    &:nth-child(3){
      -webkit-animation-delay:0.39s;
    }
    &:nth-child(4){
      -webkit-animation-delay:0.52s;
    }
    &:nth-child(5){
      -webkit-animation-delay:0.65s;
    }
    &:nth-child(6){
      -webkit-animation-delay:0.78s;
    }
    &:nth-child(7){
      -webkit-animation-delay:0.91s;
    }
    &:nth-child(8){
      -webkit-animation-delay:1.04s;
    }
    &:nth-child(9){
      -webkit-animation-delay:1.17s;
    }
    &:nth-child(10){
      -webkit-animation-delay:1.3s;
    }
    &:nth-child(11){
      -webkit-animation-delay:1.43s;
    }
    &:nth-child(12){
      -webkit-animation-delay:1.56s;
    }
    &:nth-child(13){
      -webkit-animation-delay:1.69s;
    }
    &:nth-child(14){
      -webkit-animation-delay:1.82s;
    }
    &:nth-child(15){
      -webkit-animation-delay:1.95s;
    }
  }
}
@-webkit-keyframes load{
  0%{
    background: #77babd;
    opacity: 1;
  }
  100%{
    background: #cccccc;
    opacity: 0;
  }
}

